<template>
  <div class="song-list">
    <!-- 歌单详情 -->
    <van-nav-bar title="歌单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 歌单的顶部 -->
    <div class="header">
      <img :src="song.logo" alt="">
      <h3>{{ song.dissname }}</h3>
      <div class="nick">
        <img :src="song.headurl" alt="">
        <span>{{ song.nickname }}</span>
      </div>
      <span>播放量:{{ song.visitnum }}</span>
    </div>
    <!-- 歌曲列表 -->
    <div calss="list">
      <div v-for="(item, index) in songlist" :key="index">
        <h4>{{ item.songname }}</h4>
        <div>
          <span v-for="(singerItem,index) in item.singer" :key="index">
            {{ singerItem.name }}
            <span v-show="index != item.singer.length -1">/</span>
          </span>
          <span>·</span>
          <span>{{ item.albumname }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      song: {
        logo: "",    //歌单的logo图片
        dissname: "",//歌单的名称
        headurl: "", //歌单制作者的头像
        nickname: "",//歌单制作者的名称
        visitnum: 0, //歌单的播放量
      },
      songlist: [],   //歌曲列表
      songnum: 0,     //歌曲列表数目
    }
  },
  mounted() {
    this.getListData();
  },
  methods: {
    getListData() {
      this.$request('get', '/songlist', {
        id: this.$route.params.id
      }).then(res => {
        console.log(res);
        this.song.logo = res.data.logo
        this.song.dissname = res.data.dissname
        this.song.headurl = res.data.headurl
        this.song.nickname = res.data.nickname
        this.song.visitnum = res.data.visitnum
        this.songlist = res.data.songlist   //获取歌曲列表信息
        this.songnum = res.data.songnum     //获取歌曲数目
      })
    },
    onClickLeft() {
      this.$router.go(-1)
      // window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.header>img {
  border-radius: 1rem;
  width: 50%;
}

.nick {
  overflow: hidden;
  display: flex;
  /** 弹性布局 */
  justify-content: center;
  /** 弹性布局中的内容水平居中 */
  align-items: center;
  /** 弹性布局中的内容垂直居中 */
  margin-bottom: 0.8rem;
}

.nick>img {
  height: 2rem;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.nick>span {
  height: 2rem;
  font-size: 0.8rem;
  line-height: 2rem;
}
</style>
